<template>
<div>

    <div class="compass">
        <div class="sec">
            <span class="ico"></span>
            <span class="time">
                <span class="hour">{{hour}}</span>时
                <span class="minu">{{minu}}</span>分
            </span>
            <div class="gua">
                <div class="title">{{benGua.title}}</div>
                <div class="hua iconfont" v-html="benGua.hua"></div>
            </div>
            <div class="gua gua2">
                <div class="title">{{bianGua.title}}</div>
                <div class="hua iconfont" v-html="bianGua.hua"></div>
            </div>
            <img src="img/2.png" class="sec-img" :style="secRotate">
        </div>
        <img src="img/1.png" class="orientation" :style="orientationRotate">
        <button onclick="alert(454);window.createWebview({page:'sed'})">跳转</button>
    </div>


    <ul class="ui-bottom">
        <li class="ui-bottom-li">
            <span class="ui-bottom-icon">※</span>
            <div class="ui-bottom-text">分类一</div>
        </li>
        <li class="ui-bottom-li">
            <span class="ui-bottom-icon">※</span>
            <div class="ui-bottom-text">分类一</div>
        </li>
        <li class="ui-bottom-li">
            <span class="ui-bottom-icon">※</span>
            <div class="ui-bottom-text">分类一</div>
        </li>
        <li class="ui-bottom-li">
            <span class="ui-bottom-icon">※</span>
            <div class="ui-bottom-text">分类一</div>
        </li>
    </ul>





</div>
</template>

<script>
    export default{
        data:function () {
          return {
              hour:0,
              minu:0,
              benGua:{},
              bianGua:{},
              initDate:null,
              secRotate:"transform:rotate(0)",
              orientationRotate:"transform:rotate(0)",
              iscomputeTime:true,
              lat:0
          }
        },

        methods:{
            compass:function() {
                var animateTime=50;
                var oldgetMinutes;
                var self=this;

                //设置旋转
                function createRoate(date){
                    var y=date.getFullYear();
                    var m=date.getMonth()+1;
                    var d=date.getDate();
                    var h=date.getHours();
                    var mm=date.getMinutes();
                    var s=date.getTime();
                    if(oldgetMinutes!=mm){
                        self.hour=h<10?"0"+h:h;
                        self.minu=mm<10?"0"+mm:mm;
                        getGua(y,m,d,h);
                    }
                    oldgetMinutes=mm;
                    self.secRotate="transform:rotate(-"+(s/1000)%60*6+"deg)";
                }

                //计算卦
                function getGua(y,m,d,h) {
                    var obj=calendar.solar2lunar(y,m,d,h),shangGua,shangGua2,xiaGua,xiaGua2,dongYao,bianGua,code,tmp;
                    y=calendar.Zhi.indexOf(obj.gzYear.substr(1,1))+1;
                    m=obj.lMonth;
                    d=obj.lDay;
                    h=calendar.Zhi.indexOf(obj.gzHour.substr(1,1))+1;
                    shangGua=(y+m+d)%8==0?8:(y+m+d)%8;
                    xiaGua=(y+m+d+h)%8==0?8:(y+m+d+h)%8;
                    dongYao=(y+m+d+h)%6==0?6:(y+m+d+h)%6;
                    bianGua=GUA.G8[dongYao>3?shangGua:xiaGua];
                    code=bianGua.code.toString();

                    if(dongYao==1 ||dongYao==4){
                        tmp=code[2];
                        if(tmp==0)tmp=1;else tmp=0;
                        code=code[0]+""+code[1]+""+tmp;
                    }
                    if(dongYao==2 ||dongYao==5){
                        tmp=code[1];
                        if(tmp==0)tmp=1;else tmp=0;
                        code=code[0]+""+tmp+""+code[2];
                    }
                    if(dongYao==3 ||dongYao==6){
                        tmp=code[0];
                        if(tmp==0)tmp=1;else tmp=0;
                        code=tmp+""+code[1]+""+code[2];
                    }

                    for(var k in GUA.G8){
                        if(code==GUA.G8[k].code){
                            bianGua=k;
                            break;
                        }
                    }

                    var benGuaStr=GUA.G64[shangGua+""+xiaGua].title,bianGuaStr;
                    self.benGua.title=benGuaStr.indexOf('为')<0?benGuaStr.substr(2,benGuaStr.length):benGuaStr.substr(0,1);
                    self.benGua.hua="&#xe6"+shangGua+xiaGua+";";
                    if(dongYao<4){
                        bianGuaStr=GUA.G64[shangGua+""+bianGua].title;
                        self.bianGua.hua="&#xe6"+shangGua+bianGua;
                    }else{
                        bianGuaStr=GUA.G64[bianGua+""+xiaGua].title;
                        self.bianGua.hua="&#xe6"+bianGua+xiaGua+";";
                    }
                    self.bianGua.title=bianGuaStr.indexOf('为')<0?bianGuaStr.substr(2,bianGuaStr.length):bianGuaStr.substr(0,1);
                }

                createRoate(self.initDate);
                setInterval(function () {
                    self.initDate.setTime(self.initDate.getTime()+animateTime)
                    if(self.iscomputeTime)createRoate(self.initDate);
                },animateTime);
            }
        },

        created:function(){
            var self = this;
            plus.orientation.watchOrientation(function (o) {
                self.orientationRotate = "transform:rotate(" + o.alpha.toFixed(2) + "deg)";
            }, function (e) {
                window.alert(e.message);
            });
            this.initDate = new Date();
            this.compass();
        }
    }
</script>

<style>
    /*指南针*/
    .compass{
        position: relative;width:90vw;margin:0 auto;
    .orientation{width:100%;z-index: 1;transition: transform 0.2s linear;position: relative;}
    }

    .sec{
        position: absolute;width:50vw;height:50vw;left:20vw;top:20vw;z-index: 2;
    .sec-img{width:100%; transform:translateZ(0);position: relative; z-index: 2;}
    .ico{width:0;height:0;border-width:0 2vw 3vw 2vw;border-style:solid;border-color:transparent  transparent  #ff4200  transparent;position: absolute;left:50%;margin-left: -2vw;top:9vw; z-index: 1;}
    .time{
        position:absolute;text-align: center;width:50%;left:50%;margin-left: -25%;font-size:0.75rem; z-index: 3;font-weight: bold;top:13vw;color:#666;
    .hour,.minu{font-size:1.5rem;color:#333;font-family: Arial;}
    }
    .gua{
        width:20vw;position: absolute;bottom:12vw;text-align: center;z-index: 3;left:9vw;
    .title{color:#ff4200;font-size: 0.9rem;}
    .hua{color:#ff4200;font-size:2.5rem;}
    }
    .gua2{left: auto;right:9vw;}
    }

</style>